<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>p7_制作全屏遮罩层</title>
    <style>
        .mask {
            background-color: rgba(0,0,0,0.3);
            /* 固定定位的参照物是html 紧贴四个边,且脱离文档流会覆盖在内容上面,实现遮罩层的效果 */
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
        }
    </style>
</head>
<body>
    <div class="mask"></div>
    <!-- lorem*60 Tab补齐-->
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At commodi deleniti dignissimos illo incidunt nostrum
        perspiciatis quaerat rem sapiente. Alias aliquid, exercitationem iusto provident quidem quisquam quos rem
        tempora velit.
    </div>
    <div>Beatae dignissimos dolorem id impedit ipsa, ipsum repudiandae tenetur totam! At atque eos eum explicabo
        praesentium recusandae tempora voluptate. Aliquid dolor doloribus dolorum fugiat fugit libero nam officia
        possimus tempore.
    </div>
    <div>Accusamus aliquid, aspernatur consectetur culpa cupiditate dolorem, eius expedita facilis fugiat in ipsa ipsum
        iusto molestias nesciunt nihil nisi numquam odit praesentium quae qui reiciendis sed temporibus tenetur totam
        veniam.
    </div>
    <div>A blanditiis deleniti, dolorem doloribus ea eligendi eos est necessitatibus, possimus quasi, qui quos velit
        voluptas voluptates voluptatum? Beatae culpa error est explicabo iure nemo nesciunt officia placeat repellat
        vitae.
    </div>
    <div>Consequatur dolorem facilis illo inventore odit provident vel. Ab ad aperiam atque consectetur consequatur
        dolorem dolores ducimus error et neque optio qui rem, sequi sint soluta? Deleniti facere in similique.
    </div>
    <div>Accusantium alias amet asperiores consectetur doloribus ducimus eos facilis incidunt nesciunt, pariatur
        praesentium quaerat reiciendis sapiente totam unde ut veniam? Dignissimos dolorum hic ipsam libero mollitia
        pariatur quasi reprehenderit suscipit?
    </div>
    <div>Nostrum vitae, voluptas! Amet eos facere optio quia. Adipisci consectetur deleniti distinctio dolore expedita
        hic laboriosam laudantium maxime molestias nostrum, numquam quam qui quis repellendus sequi, voluptas,
        voluptate. Fuga, minus?
    </div>
    <div>Atque enim nulla quibusdam saepe tempore velit voluptas? Accusantium blanditiis, consectetur delectus deleniti
        dicta ea facere fuga in ipsam, ipsum optio quaerat quo repellat reprehenderit sit voluptatem voluptatum. Maxime,
        sequi?
    </div>
    <div>Ab aliquid architecto aspernatur commodi consectetur consequatur dolores, doloribus expedita fugit, hic ipsam
        libero maxime nulla odio odit omnis quaerat, quasi quidem quis reiciendis saepe sapiente soluta tempora
        temporibus veritatis?
    </div>
    <div>Adipisci animi beatae ea enim eum ex hic laudantium neque quas quod? Consectetur consequuntur corporis culpa
        cupiditate earum id, illum impedit itaque, maiores minima nulla numquam perferendis quis sapiente, voluptatibus?
    </div>
    <div>Fugiat minima officia officiis praesentium voluptatum. Aspernatur assumenda autem ex quasi vero? Architecto
        corporis dolores dolorum et eum, id impedit in ipsa iusto minus mollitia omnis velit voluptatem! Consequatur,
        ea?
    </div>
    <div>Asperiores commodi, culpa dolore doloremque ea eligendi esse exercitationem illo illum libero molestias nemo
        nulla numquam odio, possimus rem repellendus reprehenderit repudiandae sed sint sunt suscipit tempore ullam ut
        voluptas.
    </div>
    <div>Consequuntur ipsam nemo, nulla omnis quae quasi repellendus repudiandae. Consectetur cum doloremque eius,
        eveniet fugiat illum incidunt ipsa ipsum libero minima nisi nobis provident qui quidem quisquam repudiandae
        tempora unde.
    </div>
    <div>Aliquam asperiores corporis culpa doloribus est in ipsam itaque nam odio, officiis possimus rem voluptas.
        Corporis culpa dolore illum in iure, non provident quae quas quasi tempora! Labore, totam voluptate!
    </div>
    <div>Accusamus architecto beatae, consectetur culpa debitis dignissimos distinctio dolorem eius error eveniet id
        incidunt iste itaque magni maxime nesciunt nihil obcaecati odio quam qui quia quibusdam repudiandae ullam vero
        vitae?
    </div>
    <div>Adipisci alias asperiores blanditiis et exercitationem facilis id incidunt ipsum laboriosam maxime nostrum
        pariatur placeat provident quis quos repellat rerum sapiente, ut? Culpa et fuga incidunt modi omnis pariatur,
        repudiandae!
    </div>
    <div>Aperiam, autem consectetur corporis cupiditate doloribus eaque esse est facere facilis illum labore libero nam
        neque nisi quas rem suscipit! Aliquid enim illum iure minus modi odio placeat suscipit voluptate.
    </div>
    <div>Ad atque cupiditate delectus dolores eaque eius est fuga fugit harum libero minima modi nihil omnis possimus,
        provident quasi quibusdam quis reprehenderit, sint, tempore vel voluptates voluptatum. Doloribus, similique,
        voluptates?
    </div>
    <div>Adipisci amet aspernatur aut beatae corporis dignissimos dolore est eum, ex fuga fugiat laboriosam libero magni
        quae quod sed sint totam vel vero voluptas! Doloribus libero minima officia placeat unde!
    </div>
    <div>Dolor fugit inventore quis sit veniam, voluptatibus? Est explicabo facere facilis perferendis placeat, quia
        quidem vel? A corporis dolor ex facere, labore maxime modi necessitatibus omnis perferendis rerum sequi tempora!
    </div>
    <div>Animi eos est et ex exercitationem fuga iste placeat repellendus ullam ut! Amet architecto aspernatur autem
        consectetur dolorem doloribus dolorum error est ex in nam obcaecati perferendis, suscipit, voluptas
        voluptatibus?
    </div>
    <div>A architecto cum dignissimos earum eveniet iste maiores mollitia nisi, odit officiis perferendis, quod sunt
        unde voluptas voluptate. Deleniti doloribus exercitationem impedit iusto maiores nihil quod sequi sint sit
        voluptate.
    </div>
    <div>Accusantium nesciunt perspiciatis quidem repellat vero. Accusamus autem delectus deleniti est et eum hic in
        iusto, labore laboriosam molestias neque nobis qui repellendus reprehenderit soluta suscipit totam veritatis
        voluptatem voluptatum!
    </div>
    <div>Accusantium animi architecto aspernatur aut beatae consequuntur cum deleniti dolore earum eligendi, iure magnam
        molestiae neque odit pariatur placeat quaerat quibusdam sed sint soluta totam vel veritatis voluptatum. Dolorum,
        placeat.
    </div>
    <div>Blanditiis culpa laborum minima quam sunt! Aliquid harum iusto laboriosam libero officia similique! A ab,
        aliquid aperiam beatae commodi dicta, dolor, dolore dolores illo ipsum necessitatibus numquam provident rerum
        veritatis.
    </div>
    <div>Ab accusamus, ad assumenda commodi consequuntur corporis ducimus eaque earum eum laboriosam magnam maiores
        molestiae numquam, placeat porro possimus quasi qui ratione reiciendis similique. Illo molestias nobis possimus
        sint vel.
    </div>
    <div>Ab alias, amet aperiam autem debitis, deleniti esse labore molestiae omnis, pariatur provident repellendus
        tempora! Aliquam, amet at aut eos, fugit ipsa libero, minima obcaecati officia quasi quis ut. Molestiae!
    </div>
    <div>Alias autem hic in ipsa ipsum libero natus nihil nulla quidem velit. Accusamus, aliquam aperiam architecto
        asperiores assumenda cumque eos eum inventore nesciunt pariatur quam, quibusdam veniam voluptatum? Corporis,
        vero?
    </div>
    <div>Blanditiis eveniet ratione tempore ullam. A, adipisci asperiores consequatur culpa debitis dolorem doloribus
        ducimus, enim et facere impedit in incidunt itaque, labore magnam natus optio quasi quisquam repellendus sit ut?
    </div>
    <div>A aliquam animi aspernatur at autem consequatur, doloremque ducimus earum excepturi fuga ipsa ipsam maxime
        minus nam necessitatibus neque nulla perferendis possimus quibusdam sapiente sint unde veniam vero vitae
        voluptatibus!
    </div>
    <div>Debitis fugiat nulla numquam optio ratione sequi totam? Ea ipsam neque obcaecati? Accusantium atque consequatur
        dicta eius eum expedita facilis impedit laboriosam laudantium pariatur praesentium quaerat quisquam repellat
        suscipit, tenetur?
    </div>
    <div>Aliquid atque autem blanditiis consectetur dicta dignissimos distinctio dolor, eaque, eligendi exercitationem
        fugiat ipsa ipsam ipsum libero nam nobis non officiis perspiciatis praesentium quis repellendus saepe tenetur
        ullam voluptas voluptatem!
    </div>
    <div>Aperiam asperiores, excepturi. Corporis excepturi fugit maxime necessitatibus sint. Aliquam aspernatur
        blanditiis, consequuntur cumque earum eius exercitationem itaque laboriosam magnam molestiae obcaecati, officiis
        optio praesentium unde veritatis! Cumque, reprehenderit, tempora?
    </div>
    <div>Deserunt earum ipsa recusandae unde? Aliquid, animi at, atque culpa dicta distinctio expedita fugiat inventore
        itaque libero modi molestiae nam nesciunt nihil nobis provident quasi, quia repellendus repudiandae temporibus?
        Aut!
    </div>
    <div>Aliquid autem debitis deleniti deserunt dignissimos dolorum ea eaque error esse facilis harum laboriosam minus
        nostrum nulla numquam obcaecati optio placeat porro quae, rem repellendus suscipit tempora tenetur voluptate
        voluptatibus.
    </div>
    <div>Aliquam atque dolore, ea et fuga hic inventore, iste, mollitia quaerat quasi ratione recusandae? Delectus eos
        explicabo ipsam ipsum laboriosam omnis quod repellat, totam veniam. Ab accusantium perferendis quisquam
        voluptate.
    </div>
    <div>Culpa deleniti ducimus illo iusto maxime molestias sapiente unde! Deleniti ducimus, hic incidunt ipsam libero
        minus nisi optio recusandae sint vitae. Adipisci expedita fuga laboriosam reiciendis ut? Exercitationem facilis,
        quia.
    </div>
    <div>Ad aliquid explicabo modi nam nostrum quo ratione? At delectus, dicta enim est eveniet harum illo ipsum
        laborum, libero maiores odio optio, praesentium qui sunt voluptas. Aperiam maiores sequi velit.
    </div>
    <div>Autem, neque, nobis? Aliquam amet animi architecto ea eos eum excepturi fugit ipsa nostrum, obcaecati quis
        repellat saepe sed sunt unde ut veniam veritatis, voluptatibus. Aliquid cupiditate doloribus ipsam suscipit.
    </div>
    <div>Accusantium alias aliquam aperiam at atque beatae, deleniti dignissimos eum facere fugit id illo, ipsam iure
        laboriosam maiores molestias nostrum pariatur possimus praesentium quos ratione reprehenderit repudiandae sequi
        sint vitae?
    </div>
    <div>Animi consequatur consequuntur cupiditate delectus distinctio earum error excepturi facilis incidunt libero
        magnam nam nulla obcaecati, provident quae qui, quo? Dolores ipsum laboriosam nesciunt? Delectus ipsa
        perferendis placeat suscipit velit.
    </div>
    <div>Earum ex labore maiores nam officiis quis repudiandae sit veniam! Eius fugit magni neque placeat? At eius iure
        obcaecati? Ab alias beatae dolor labore odio officiis, perferendis possimus sed tempora.
    </div>
    <div>Aperiam, natus odio. A animi cupiditate deserunt eius eos error id illum, laudantium molestias quam ratione
        velit voluptates voluptatum. Accusamus aliquam amet dolorem libero magni nisi numquam quidem reiciendis veniam!
    </div>
    <div>Accusantium ad autem commodi culpa cupiditate dolore dolores eligendi ex id labore laborum nemo nihil nisi
        nostrum numquam optio perferendis quibusdam quisquam reiciendis reprehenderit saepe sapiente, similique tempore
        voluptate, voluptatem.
    </div>
    <div>Adipisci, aspernatur commodi dicta dolorum fuga quos repellat voluptatibus? Asperiores cumque, doloribus fugiat
        illo laboriosam molestiae mollitia nesciunt perferendis, placeat praesentium provident quaerat ratione similique
        temporibus ullam. Eum, numquam, possimus.
    </div>
    <div>Culpa debitis dignissimos ducimus ea earum excepturi expedita hic, in mollitia neque praesentium quam, quo
        repellendus, soluta voluptate. Adipisci aliquam aut distinctio ex facilis nam necessitatibus nesciunt pariatur
        reiciendis voluptas!
    </div>
    <div>Architecto deserunt enim id illum in incidunt ipsum itaque magnam ut. Cumque debitis, dicta, dolor eaque eos
        error expedita ipsa magnam maiores molestias quia quidem quo similique, sunt unde vel?
    </div>
    <div>At distinctio earum explicabo iste modi molestias repellat soluta voluptates. Dignissimos eius, harum labore
        maxime minima neque nulla quidem reiciendis. Fuga iusto laudantium, maxime placeat unde voluptatum. Laborum,
        quas ullam.
    </div>
    <div>Adipisci aliquam autem doloremque doloribus ea, eos excepturi ipsum itaque magnam nihil obcaecati, porro
        quaerat quasi quo, quos sed velit! Atque culpa dolore facere ipsam omnis porro quibusdam recusandae sapiente!
    </div>
    <div>Aspernatur delectus, dicta eveniet ex explicabo facere hic impedit itaque iure nisi numquam officiis pariatur
        perferendis perspiciatis placeat possimus suscipit voluptate voluptates. Assumenda at beatae cum ducimus iure
        odio odit?
    </div>
    <div>Alias aliquid autem blanditiis debitis ducimus, error est ipsam iusto laborum magni nam necessitatibus neque
        obcaecati possimus quam rem repellat sint tempore voluptatibus voluptatum! Aliquam commodi fugiat iste similique
        suscipit?
    </div>
    <div>Adipisci alias laudantium obcaecati quibusdam quis sapiente. Atque aut cum, earum, laudantium minus, nam
        nostrum placeat quaerat ratione reprehenderit tempore veritatis! Animi debitis dignissimos fugiat nam porro
        praesentium reiciendis voluptas.
    </div>
    <div>Accusantium amet commodi, dolores eveniet inventore, ipsa ipsam ipsum necessitatibus nobis obcaecati quibusdam
        quo repellendus, unde! Accusantium, atque consectetur enim, eos fugiat impedit incidunt ipsam minima mollitia,
        nihil suscipit temporibus?
    </div>
    <div>Aut doloremque incidunt necessitatibus perferendis quod! Accusantium amet beatae, delectus excepturi
        perspiciatis quis similique suscipit voluptates. Esse, fugiat harum id ipsum nihil odit perspiciatis reiciendis
        reprehenderit saepe sit veniam voluptate!
    </div>
    <div>Aliquid beatae, blanditiis consectetur cumque eaque explicabo, inventore labore minus provident quos rem ullam.
        Aperiam architecto at cupiditate ducimus eligendi harum itaque numquam odit, officia, pariatur quod
        reprehenderit suscipit voluptas?
    </div>
    <div>Autem consequatur error excepturi ipsum laudantium magni maiores minus nemo, obcaecati tempora? Deserunt eaque
        explicabo facere illo iure labore obcaecati perspiciatis, quaerat quas quibusdam quos repellendus sed velit
        veniam veritatis?
    </div>
    <div>Ab amet fugit nesciunt porro sed! Architecto at autem blanditiis culpa cumque, esse exercitationem fugiat
        inventore magnam minus, nemo neque nobis perferendis, porro quam rem sed tenetur unde veritatis vitae?
    </div>
    <div>A aliquam beatae delectus modi nisi porro? Accusantium alias aut debitis, dolores eaque, esse ipsam ipsum
        magnam, modi natus quaerat quasi qui quidem repellendus sed suscipit totam unde ut voluptates.
    </div>
    <div>Commodi, eius facilis? A accusamus amet assumenda consequatur deleniti dolorem dolores eaque est iusto
        laboriosam libero, nam, neque nisi odio officiis possimus, quasi quibusdam quos rem rerum sapiente sed sequi.
    </div>
    <div>Ad aliquam debitis dicta exercitationem, iusto molestias officia possimus recusandae, tenetur, totam vel
        voluptatibus! Alias dolor, dolores fugit impedit itaque nesciunt nobis pariatur praesentium, recusandae sed sint
        tempora. Ab, doloremque.
    </div>
</body>
</html>